.widget-timeline .timeline-year {
  height: 100%;
  @media (min-width: $br-mobileMap){
    padding-left: 50px;
    &.no-play{
      padding-left: 0;
    }
  }


  // Play button
  .play {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 100%;
    cursor: pointer;
    padding: 20px;
    @media (min-width: $br-mobileMap){
      width: 50px;
    }
    &:after{
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      @include transform(translate(0,-50%));
      width: 1px;
      height: 60%;
      background: $border;
    }

    &:hover {
      .play-icon, .stop-icon {
        opacity: 0.9;
      }
    }

    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      @include transform(translate(-50%,-50%));
      margin: 0 0 0 1px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 7px 0 7px 10px;
      border-color: transparent transparent transparent $dark;
    }

    .stop-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      @include transform(translate(-50%,-50%));
      display: none;
      width: 10px;
      height: 10px;
      background: $dark;
    }
  }

  .time {
    height: 100%;
    position: relative;
    @media (min-width: $br-mobileMap){
      padding: 0 5px;
    }
    svg{
      width: auto;
    }
    .select-timeline-container{
      @include display-flex();
      @include justify-content(center);
      @include align-items(center);
      line-height: 46px;
      .select-timeline-box{
        margin: 0 0 0 10px;
        &:first-child{
          margin: 0;
        }
        position: relative;
        span{
          font-size: 12px;
          // text-transform: uppercase;
        }
        button{
          top: -1px;
          padding: 0 20px;
          margin: 0 0 0 5px;
        }
        select{
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 10;
          -webkit-appearance: none;
        }
      }
    }
  }

  .xaxis{
    text {
      font-size: 11px;
      fill: $dark;
      // font-weight: 500;

      &.selected {
        fill: $cGreen1;
      }
    }
    .tick{
      // @include transform(translateY(3px));
    }
    .domain {
      stroke: $cGreen1;
      stroke-width: 4;
      @include transform(translate(0,-4px));
      // shape-rendering: crispEdges;
    }
  }
  .xaxis-years{
    @media (max-width: $br-mobileMap - 1){
      display: none;
    }
    &.prodes{
      .tick:first-child{
        @include transform(translate(0,2px));
        text {
          font-size: 9px;
        }
      }
    }
    text {
      font-size: 11px;
      fill: $dark;
      font-weight: 500;
      &:hover{
        fill: $cGreen1;
      }
      &.selected {
        fill: $cGreen1;
      }
    }
  }


  .slider .handle {
    fill: $cGreen1;
    stroke: darken($cGreen1, 20);
    cursor: col-resize;
    @include transform(translate(-9px,-3px));
  }
}
